﻿<h2>Navigation Examples</h2>

<FluentStack Orientation="Orientation.Horizontal" >
    <div style="background: var(--neutral-layer-3); display: flex; padding: 10px;">
        <FluentNavMenu @bind-Expanded="@expanded" Width="250" Title="Custom navigation menu">
            <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Href="/" Match="NavLinkMatch.All">Home</FluentNavLink>
            <FluentNavLink Href="/NavMenu">Item 2</FluentNavLink>
            <FluentNavGroup OnClick="OnClick" Title="Item 3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
                <TitleTemplate><h3>Item 3</h3></TitleTemplate>
                <ChildContent>
                    <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size20.LeafOne())">Item 3.1</FluentNavLink>
                    <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 3.2</FluentNavLink>
                </ChildContent>
            </FluentNavGroup>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.CalendarAgenda())" Disabled="true" Href="https://microsoft.com">Item 4</FluentNavLink>
            <FluentNavLink Icon="@(new Icons.Regular.Size20.Home())" Disabled="true">Item 5</FluentNavLink>
            <FluentNavGroup Expanded="true" Title="Item 6 Item 6 Item 6 Item 6 Item 6" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
                <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.1</FluentNavLink>
                <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.2</FluentNavLink>
                <FluentNavGroup Expanded="true" Title="Item 6.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
                    <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.1 Item 6.3.1 Item 6.3.1</FluentNavLink>
                    <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.2</FluentNavLink>
                    <FluentNavGroup Expanded="true" Title="Item 6.3.3 Item 6.3.3 Item 6.3.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
                        <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.3.1</FluentNavLink>
                        <FluentNavLink Disabled="true" Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.3.2</FluentNavLink>
                        <FluentNavGroup Disabled="true" Expanded="true" Title="Item 6.3.3.3" Icon="@(new Icons.Regular.Size20.EarthLeaf())">
                            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafOne())">Item 6.3.3.3.1</FluentNavLink>
                            <FluentNavLink Icon="@(new Icons.Regular.Size20.LeafTwo())">Item 6.3.3.3.2</FluentNavLink>
                        </FluentNavGroup>
                    </FluentNavGroup>
                </FluentNavGroup>
            </FluentNavGroup>
        </FluentNavMenu>
    </div>

    @code
    {
        bool expanded = true;
    }

    <!-- Menu with icons -->
    <FluentNavMenu>
        <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size24.Home())" >Item 1</FluentNavLink>
        <FluentNavLink OnClick="OnClick" >Item 2</FluentNavLink>
        <FluentNavLink OnClick="OnClick" Icon="@(new Icons.Regular.Size24.LeafOne())" >Item 3</FluentNavLink>
        <FluentNavLink OnClick="OnClick" >Item 4</FluentNavLink>
    </FluentNavMenu>

    <!-- Menu simple -->
    <FluentNavMenu>
        <FluentNavLink OnClick="OnClick" >Item 1</FluentNavLink>
        <FluentNavLink OnClick="OnClick" >Item 2</FluentNavLink>
        <FluentNavLink OnClick="OnClick" >Item 3</FluentNavLink>
        <FluentNavLink OnClick="OnClick" >Item 4</FluentNavLink> 
    </FluentNavMenu>

</FluentStack>
@code
{
    void OnClick(MouseEventArgs e)
    {
        DemoLogger.WriteLine("NavMenu item clicked");
    }
}


